<template>
  <div class="app-container">
    <el-tabs v-model="tabValue" @tab-click="handleTabChange">
      <el-tab-pane label="全局" name="ALL"></el-tab-pane>
      <el-tab-pane label="飞屋消消消" name="second"></el-tab-pane>
      <el-tab-pane label="abcc" name="third"></el-tab-pane>
      <el-tab-pane label="旅游行业模板" name="fourth"></el-tab-pane>
    </el-tabs>
    <div class="right-control">
      <el-radio-group :value="type">
        <el-radio-button
          label="NONE"
          @click.prevent.native="handleEnable('NONE')"
        >
          不启用
        </el-radio-button>
        <el-radio-button
          label="BLACK"
          @click.prevent.native="handleEnable('BLACK')"
        >
          启用黑名单
        </el-radio-button>
        <el-radio-button
          label="WHITE"
          @click.prevent.native="handleEnable('WHITE')"
        >
          启用白名单
        </el-radio-button>
      </el-radio-group>
    </div>

    <pro-table
      v-if="type !== 'NONE'"
      ref="pageBox"
      title="黑白名单"
      :request="getList"
      :columns="columns"
      :search="searchObj"
      @selectionChange="handleSelectionChange"
    >
      <template #toolbar>
        <el-tooltip v-if="tabValue === 'ALL'" placement="left">
          <div slot="content" style="width: 240px; line-height: 1.8">
            使用导入功能时，需注意您选择导入的Excel文件表格表头需要与当前表格表头完全一致（列数，语言，大小写字母，空格字符等），为避免出现不必要的错误，请确认文件符合导入要求。
          </div>
          <el-button type="primary" @click="handleShowImport">
            <svg-icon icon-class="import"></svg-icon>
            导入
          </el-button>
        </el-tooltip>

        <el-button
          v-if="type === 'BLACK'"
          key="1"
          icon="el-icon-plus"
          type="primary"
          @click="handleShowAddEdit()"
        >
          创建黑名单
        </el-button>
        <el-button
          v-if="type === 'WHITE'"
          key="2"
          icon="el-icon-plus"
          type="primary"
          @click="handleShowAddEdit()"
        >
          创建白名单
        </el-button>
        <el-button
          :disabled="selectedArr.length <= 0"
          icon="el-icon-delete"
          @click="handleDelete"
        >
          批量删除
        </el-button>
      </template>
      <template #expand="{ row }">
        <el-card shadow="never">
          全部手机号：
          <p v-if="row.numbers">{{ row.numbers.join(',') }}</p>
          <p v-if="row.range">{{ row.range.start }}~{{ row.range.end }}</p>
          备注
          <p>{{ row.remark }}</p>
        </el-card>
      </template>

      <template #numbers="{ row }">
        <span v-if="row.numbers">{{ row.numbers.join(',') }}</span>
        <span v-if="row.range">{{ row.range.start }}~{{ row.range.end }}</span>
      </template>
      <template #tags="{ row }">
        <el-tag v-for="item in row.tags" :key="item" style="margin: 4px">
          {{ item }}
        </el-tag>
      </template>
      <template #date="{ row }">
        {{ row.createTime | parseTime }}
      </template>

      <template #operate="{ row }">
        <el-tooltip content="编辑" placement="top">
          <i
            class="el-icon-edit operate-button"
            @click="handleShowAddEdit(row)"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="删除" placement="top">
          <i
            class="el-icon-delete operate-button"
            @click="handleDelete([row])"
          ></i>
        </el-tooltip>
      </template>
    </pro-table>

    <!-- 导入用户 -->
    <el-dialog
      v-if="showImport"
      :visible.sync="showImport"
      :close-on-click-modal="false"
      title="导入名单"
      width="520px"
    >
      <import-user @close="showImport = false" />
    </el-dialog>
    <!-- 创建/编辑页面 -->
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :visible.sync="showAddEdit"
      direction="rtl"
      size="450px"
      @closed="isAddEdit = false"
    >
      <add-edit
        v-if="isAddEdit"
        :user="selectedRow"
        :list-type="type"
        @close="showAddEdit = false"
      />
    </el-drawer>
  </div>
</template>
<script>
import ImportUser from './components/ImportUser'
import AddEdit from './components/AddEdit'
export default {
  name: 'BlackWhiteList',
  components: { AddEdit, ImportUser },
  data() {
    return {
      tabValue: 'ALL',
      type: 'NONE',
      showImport: false,
      showPageModal: false,
      selectedRow: {},
      isAddEdit: false,
      showAddEdit: false,
      selectedArr: [],
      columns: [
        { type: 'expand', tdSlot: 'expand' },
        { type: 'selection' },
        {
          label: '名称',
          prop: 'name',
        },
        {
          label: '手机号',
          tdSlot: 'numbers',
        },
        {
          label: '级别',
          prop: 'level',
          width: 240,
          wrap: true,
        },
        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },

        {
          label: '操作',
          tdSlot: 'operate',
          width: 120,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'text',
            label: '',
            name: 'keyword',
            placeholder: '名称、备注',
          },
        ],
      },
    }
  },
  async created() {
    this.type = await Promise.resolve('NONE')
  },
  methods: {
    handleEnable(v) {
      console.log(v)
      switch (v) {
        case 'NONE':
          this.$confirm(
            '不启用黑白名单，所有用户都可以使用，确定吗？',
            '不启用',
            {
              iconClass: 'el-icon-warning warning',
              center: true,
            }
          )
            .then(() => {
              this.type = 'NONE'
            })
            .catch(() => {})
          break
        case 'WHITE':
          this.$confirm(
            '启用白名单，仅白名单中列出的用户允许使用，确定吗？',
            '启用白名单',
            {
              iconClass: 'el-icon-warning warning',
              center: true,
            }
          )
            .then(() => {
              this.type = 'WHITE'
            })
            .catch(() => {})
          break
        case 'BLACK':
          this.$confirm(
            '启用黑名单，黑名单中列出的用户将不允许使用，确定吗？',
            '启用黑名单',
            {
              iconClass: 'el-icon-warning warning',
              center: true,
            }
          )
            .then(() => {
              this.type = 'BLACK'
            })
            .catch(() => {})
          break
        default:
          break
      }
    },
    handleTabChange() {},
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  applicationId: '0',
                  createTime: '2022-03-15T07:31:52.000+0000',
                  enterpriseId: '141598637888113837',
                  id: '218053127385910387',
                  level: 'ENTERPRISE',
                  name: 'sdfasdf',
                  numbers: ['15678932435', '13456234234'],
                  type: 'BLACK',
                },
                {
                  applicationId: '0',
                  createTime: '2022-03-16T07:25:46.000+0000',
                  enterpriseId: '141598637888113837',
                  id: '218052603399897708',
                  level: 'ENTERPRISE',
                  name: '111111',
                  range: { start: '15788889999', end: '16788888888' },
                  remark: '啊手动阀手动阀',
                  type: 'BLACK',
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
    handleSelectionChange(arr) {
      this.selectedArr = arr
    },
    async handleDelete() {
      this.$confirm(
        '选定的条目及条目相关的数据将被删除且不可恢复，您是否确定删除？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      )
    },

    handleShowAddEdit(item) {
      this.selectedRow = item || {}
      this.isAddEdit = true
      this.showAddEdit = true
    },
    handleShowImport() {
      this.showImport = true
    },
  },
}
</script>
<style lang="scss" scoped>
.right-control {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
